<template>
  <div class="goods-relevant">
    <h3>{{title}}</h3>
    <transition-group tag="ul" name="list" @mouseenter.native="clearPlay()" @mouseleave.native="autoPlay()">
      <li v-for="item in list" :key="item.id">
        <a href="javascript:;" @click="$router.push('/product/'+item.id)">
          <img :src="item.picture" alt="">
          <p class="name ellipsis">{{item.name}}</p>
          <p class="desc">{{item.tag}}</p>
          <p class="price">¥{{item.price}}</p>
        </a>
      </li>
    </transition-group>
    <a @click="prev()" href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a>
    <a @click="next()" href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a>
    <div class="indicators">
      <li :class="{active:page===i}" v-for="i in Math.ceil(this.goods.length / this.pageSize)" :key="i"></li>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-relevant',
  props: {
    id: {
      type: Number
    },
    title: {
      type: String
    }
  },
  data () {
    return {
      goods: [],
      page: 1,
      pageSize: 4
    }
  },
  computed: {
    list () {
      return this.goods.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
    }
  },
  created () {
    this.getGoods()
  },
  methods: {
    getGoods () {
      this.$http.get('/goods/relevant', { params: { id: this.id } }).then((res) => {
        this.goods = res.data.result
      })
      this.autoPlay()
    },
    prev () {
      this.page--
      if (this.page < 1) this.page = Math.ceil(this.goods.length / this.pageSize)
    },
    next () {
      this.page++
      if (this.page > Math.ceil(this.goods.length / this.pageSize)) this.page = 1
    },
    autoPlay () {
      this.clearPlay()
      this.timer = window.setInterval(() => {
        this.page++
        if (this.page > Math.ceil(this.goods.length / this.pageSize)) this.page = 1
      }, 5000)
    },
    clearPlay () {
      window.clearInterval(this.timer)
    }
  }
}
</script>

<style scoped lang='less'>
.list-enter-active {
  transition: all 1s;
}
.list-enter  {
  opacity: 0.3;
}
.list-leave-active,.list-leave-to,.list-leave {
  position: absolute;
  display: none;
}
// 相关商品
.goods-relevant {
  background: #fff;
  margin: 20px 0;
  padding: 30px 28px;
  position: relative;
  height: 456px;
  h3 {
    font-weight: normal;
    font-size: 20px;
    padding-bottom: 8px;
    padding-left: 25px;
    position: relative;
    &::after{
      content: "";
      width: 10px;
      height: 10px;
      border-right: 5px solid @xtxColor;
      border-top: 5px solid @xtxColor;
      position: absolute;
      left: 0;
      top: 6px;
      transform: rotate(45deg);
    }
    &::before{
      content: "";
      width: 10px;
      height: 10px;
      background: #defaf2;
      position: absolute;
      left: -5px;
      top: 8px;
      transform: rotate(45deg);
    }
  }
  .prev,
  .next {
    position: absolute;
    top: 200px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #dbdbdb;
    span {
      font-size: 30px;
    }
  }
  .prev {
    left: 0;
  }
  .next {
    right: 0;
  }
  .indicators {
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: center;
    list-style: none;
    li {
      width: 10px;
      height: 10px;
      background: rgba(0,0,0,0.2);
      border-radius: 50%;
      margin-right: 10px;
      &.active {
        background: @xtxColor;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  ul {
    display: flex;
    justify-content: space-around;
    li {
      width: 260px;
      height: 360px;
      text-align: center;
      img {
        width: 190px;
        height: 190px;
        margin-top: 25px;
        background: #f5f5f5;
      }
      .name {
        font-size: 16px;
        line-height: 40px;
        padding: 0 20px;
      }
      .desc {
        color: #999;
        line-height: 50px;
      }
      .price {
        color: @priceColor;
        font-size: 18px;
        line-height: 50px;
      }
    }
  }
}
</style>
